<!--
 * @Author: 哈尔滨大拐 3181845089@qq.com
 * @Date: 2022-07-11 12:07:05
 * @LastEditors: 哈尔滨大拐 3181845089@qq.com
 * @LastEditTime: 2022-07-13 11:36:49
 * @FilePath: \mygit\实验\20-进度条.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEt
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #progress {
            width: 0%;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="progress">0%</div>
    <button id="btn" onclick="progressStart()">run</button>

    <script>
        const run = document.querySelector('#btn')
        const progress = document.querySelector('#progress')
        // const div = document.querySelector("div")
        let num = 0
        let timer


        // setInterval方法
        // function progressStart() {
        //     timer = setInterval(function () {
        //         if (num < 100) {
        //             num += 1
        //             progress.innerHTML = num + "%"
        //             progress.style.width = num + "%"
        //         }
        //     }, 80);

        // }


        // setTimeout方法
        // function progressStart() {
        //     for (let i = 0; i < 101; i++) {
        //         timer = i * 50
        //         setTimeout(function () {
        //             progress.innerHTML = i + "%"
        //             progress.style.width = i + "%"
        //         }, timer)

        //     }
        // }


        // requestAnimationFrame方法
        function progressStart() {
            render()
        }
        function render() {
            if (num < 100) {
                num += 1
                progress.innerHTML = num + "%"
                progress.style.width = num + "%"
                window.requestAnimationFrame(render);
            }
        }



    </script>
</body>

</html>